<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>日志管理模块</title>
    <!-- 导入vue -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/index.js"></script>
    <style>
        .cell{
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-card shadow="always">
            <div slot="header">
                <span>车服租赁管理</span>
            </div>
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>操作日志管理</el-breadcrumb-item>
                <el-breadcrumb-item>日志记录</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card>
        <el-card shadow="always">
        <el-form :model="form" class="query-form" :inline="true" size="middle">
            <el-form-item label="方法名">
                <el-input v-model="form.methodName" placeholder="请输入方法名" clearable></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="form.endTime" type="datetime" placeholder="请选择结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  icon="el-icon-search" @click="search()">查询</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="deleteBatch">删除</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="pageInfo.list"
                :default-sort = "{prop:'logTime', order:'descending'}"
                border
                stripe
                size="middle"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="60">
            </el-table-column>
            <el-table-column prop="id" label="编号" width="100"></el-table-column>
            <el-table-column prop="methodName" label="方法名" width="200"></el-table-column>
            <el-table-column prop="methodParams" label="方法参数">
                <template slot-scope="scope">
                    <!-- 新增鼠标移动到名称位置显示全部 -->
                    <el-popover placement="top-start" width="250" trigger="hover">
                        <!-- 详情 -->
                        <slot>{{scope.row.methodParams}}</slot>
                        <!-- 内容和过滤-->
                        <el-button slot="reference" type="text">{{ellipsis(scope.row.methodParams)}}</el-button>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="executionTime" label="执行时间">
                <template slot-scope="scope">
                    {{ scope.row.executionTime }}毫秒
                </template>
            </el-table-column>
            <el-table-column prop="result" label="返回结果">
                <template slot-scope="scope">
                    <!-- 新增鼠标移动到名称位置显示全部 -->
                    <el-popover placement="top-start" width="350" trigger="hover">
                        <!-- 详情 -->
                        <slot>{{scope.row.result}}</slot>
                        <!-- 内容和过滤-->
                        <el-button slot="reference" type="text">{{ellipsis(scope.row.result)}}</el-button>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="logTime" label="记录时间" sortable></el-table-column>
        </el-table>

        <el-pagination style="margin-top: 10px"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="form.pageNum"
                       :page-sizes="[5, 10, 20]"
                       :page-size="form.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pageInfo.total">
        </el-pagination>
        </el-card>
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    form: {
                        methodName: '', // 方法名
                        startTime: null, // 开始时间
                        endTime: null, // 结束时间
                        pageNum: 1,
                        pageSize: 5,
                    },
                    pageInfo: {},
                    logs: [], // 日志数据
                    multipleSelection: [],

                };
            },
            methods: {
                // //分页显示
                // findPage() {
                //     axios.get(`/log/findPage?page=${this.page}&size=${this.size}`).then(resp => {
                //         this.pageBean = resp.data;
                //         this.logs = this.pageBean.data;
                //     });
                // },
                //条件分页查询
                //显示内容的方法
                ellipsis(value) {
                    //没有值，返回空字符串
                    if (!value) return ''
                    //长度大于12就，取前面一部分
                    if (value.length > 20) {
                        return value.slice(0, 20) + '...'
                    }
                    return value
                },
                findByConditionPage() {
                    //访问服务器获取数据
                    axios.post(`/log/findPage`,this.form).then(resp => {
                        //获取服务器返回的数据
                        this.pageInfo = resp.data;
                        this.logs = resp.data;
                        //把数据显示在表格中
                    });
                },
                //查询按钮
                search() {
                    this.form.pageNum = 1;
                    this.findByConditionPage();
                },
                //批量删除
                deleteBatch() {
                    //判断是否选中
                    if (this.multipleSelection.length == 0) {
                        this.$message.warning("请先选中要删除的数据");
                        return;
                    }
                    //删除前确认
                    this.$confirm(`此操作将永久删除${this.multipleSelection.length}条记录,是否继续?`, '提示',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        //1.把对象数组转成id的数组 (row表示数组中每个元素)
                        let ids = this.multipleSelection.map(row => row.id);
                        console.log(ids);
                        //2.发送删除操作给服务器端
                        axios.post("/log/deleteBatch", ids).then(resp => {
                            //获取删除的行数
                            let num = resp.data.data;
                            this.$message.success(`成功删除${num}条操作日志记录`);
                            //重新加载表格数据
                            this.findByConditionPage();
                        });
                    }).catch(() => {
                        //不做什么
                    });
                },
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.form.pageSize = val;
                    this.findByConditionPage();
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.form.pageNum = val;
                    this.findByConditionPage();
                }
            },
            created() {
                this.findByConditionPage();
            }
        });
    </script>

    <style>
        .pagination {
            margin-top: 15px;
            text-align: center;
        }

        .query-form {
            margin-bottom: 5px;
        }
    </style>
</body>

</html>